<template>
    <el-card class="book-card" :body-style="{ padding: '20px' }">
      <div class="card-content">
        <!-- 左侧书本图片 -->
        <div class="book-image">
          <img :src="book.imageUrl" alt="Book Image" />
        </div>
  
        <!-- 右侧内容 -->
        <div class="book-details">
          <!-- 标题 -->
          <h3 class="book-title">{{ book.title }}</h3>
  
          <!-- 详情介绍 -->
          <p class="book-description">{{ book.description }}</p>
  
          <!-- 如果是免费的，则不显示价格 -->
          <div v-if="!book.price">
            <span class="free">免费</span>
          </div>
          <!-- 如果是收费的，显示价格 -->
          <div v-else>
            <div class="price">
              <span class="current-price">{{ book.price }} 元</span>
              <span v-if="book.originalPrice" class="original-price">{{ book.originalPrice }} 元</span>
            </div>
          </div>
  
          <!-- 章与节、浏览次数 -->
          <div class="book-meta">
            <span class="chapters">{{ book.chapters }} 章 {{ book.sections }} 节</span>
            <span class="views">{{ book.views }} 浏览</span>
          </div>
        </div>
      </div>
    </el-card>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  // 模拟书本数据
  const book = ref({
    imageUrl: 'https://via.placeholder.com/150', // 书本图片链接
    title: '深入理解算法与数据结构',
    description: '这是一本关于数据结构与算法的书籍，适合初学者和有一定基础的开发者。通过生动的案例，逐步讲解了各类数据结构和算法的实现原理及其应用，帮助读者全面掌握数据结构和算法的核心知识。',
    chapters: 12,
    sections: 50,
    views: 1234,
    price: 99, // 价格，如果没有价格，则为空或设置为null
    originalPrice: 199 // 原价，如果没有原价则为空或设置为null
  });
  </script>
  
  <style scoped>
  .book-card {
    display: flex;
    width: 100%;
    max-width: 600px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  }
  
  .card-content {
    display: flex;
    width: 100%;
  }
  
  .book-image img {
    width: 120px;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
  }
  
  .book-details {
    margin-left: 20px;
    flex-grow: 1;
  }
  
  .book-title {
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    color: #333;
  }
  
  .book-description {
    font-size: 14px;
    color: #555;
    margin: 10px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .book-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #999;
  }
  
  .book-meta .chapters, .book-meta .views {
    padding: 5px;
  }
  
  .free {
    color: #32a852;
    font-weight: bold;
  }
  
  .price {
    margin-top: 10px;
  }
  
  .current-price {
    color: #f56c6c;
    font-weight: bold;
  }
  
  .original-price {
    text-decoration: line-through;
    margin-left: 10px;
    color: #999;
  }
  </style>
  